<route>{ title: '倒计时按钮' }</route>

<template>
  <h1>CountDownBtn 倒计时按钮</h1>
  <p>按秒进行倒计时。</p>

  <h2>基础用法</h2>

  <!-- prettier-ignore -->
  <code-demo>
    <count-down-btn :checkCondition="checkCondition"></count-down-btn>

    <template #code>
      {{ `
<template>
  <count-down-btn :checkCondition="checkCondition"></count-down-btn>
</template>

<script setup>
  function checkCondition() {
    return new Promise(function (resolve) {
      setTimeout(function () {
        resolve(true)
      }, 1000)
    })
  }
</script>
      ` }}
    </template>
  </code-demo>

  <h2>Attributes</h2>
  <table-info type="prop" :data="propTable"></table-info>
</template>

<script setup>
function checkCondition() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve(true)
    }, 1000)
  })
}

const propTable = [
  {
    name: 'checkCondition',
    desc: '检测是否可开始倒计时，返回boolean，可异步',
    type: '() => boolean',
    default: '() => true',
  },
  {
    name: 'formatter',
    desc: '按钮的文案，可根据当前倒计时数区分是初始状态与倒计时状态',
    type: '(count: number) => string',
    default: "(count) => count > 0 ? `${count}秒后重新发送` : '发送短信验证码'",
  },
  {
    name: 'maxCount',
    desc: '倒计时的最大值',
    type: 'number',
    default: '60',
  },
]
</script>
